import { t } from 'i18next'
import React, { FC } from 'react'
import { Avatar } from '@/components/Avatar'
import { IconCheckbox, IconOftenInAvatar, IconRemove, IconToggleCancel, ItemWrap } from '../style'
import { SimpleUserModel } from '../interface'
import { useUserOftenStore } from './store'
import { removeItemInSimple } from '../store.combine'

export const ListItem: FC<SimpleUserModel> = (props) => {
	const { mcc, status, uuid } = props

	const itemHandle = useUserOftenStore((state) => state.itemHandle)

	const handleCheckItem = (e: React.MouseEvent) => {
		if (e.ctrlKey) {
			itemHandle(uuid, 'ctrl')
		} else if (e.shiftKey) {
			itemHandle(uuid, 'shift')
		} else {
			itemHandle(uuid, 'click')
		}
	}

	const handleMultiCheck = (e: React.MouseEvent) => {
		e.stopPropagation()
		itemHandle(uuid, 'ctrl')
	}

	const handleRemove = (e: React.MouseEvent) => {
		e.stopPropagation()
		removeItemInSimple(uuid)
	}

	return (
		<ItemWrap checked={status.checked} onClick={handleCheckItem}>
			<div className="left-wrap" onClick={handleMultiCheck}>
				<IconCheckbox className="icon-checkbox" />
			</div>
			<div className="avatar" title={mcc.name}>
				<Avatar value={mcc} />
				<IconOftenInAvatar className="avatar--often" />
			</div>
			<div className="name" title={mcc.name}>
				{mcc.name}
			</div>
			<div className="right-icons">
				<IconToggleCancel className="set-often" title={t('取消常用终端')} onClick={handleRemove} />
				<IconRemove className="remove" onClick={handleRemove} />
			</div>
		</ItemWrap>
	)
}
